<template>
  <app-container>
    <app-block>
      <el-tabs
        v-model="searchForm.tabType"
        @tab-click="onSearch"
        class="wp100 vm"
      >
        <el-tab-pane
          :label="item.label"
          :name="item.value"
          v-for="(item, index) in activeStatus"
          :key="index"
        />
      </el-tabs>
      <zm-form :model="searchForm" ref="searchForm" inline>
        <zm-form-item prop="orderNoName">
          <zm-input
            class="w200"
            v-model="searchForm.orderNoName"
            placeholder="请输入销售单号或销售单名称"
          />
        </zm-form-item>
        <zm-form-item prop="productCodeName">
          <zm-input
            class="w200"
            v-model="searchForm.productCodeName"
            placeholder="请输入产品名称/产品编码"
          />
        </zm-form-item>
        <zm-form-item label prop="type">
          <zm-data-select
            v-model="searchForm.type"
            k1="saleOrderType"
            placeholder="销售单类型"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <!-- <zm-form-item label prop="dateType">
          <zm-data-select
            v-model="searchForm.dateType"
            :list="dateType"
            placeholder="日期类型"
            class="w200"
          ></zm-data-select>
        </zm-form-item> -->
        <zm-form-item prop="startTime">
          <zm-date-picker
            :target="searchForm"
            start-key="startTime"
            end-key="endTime"
          />
        </zm-form-item>
        <zm-form-item label prop="operatorId">
          <zm-data-select
            v-model="searchForm.operatorId"
            api="getSaleList"
            placeholder="所属业务员"
            class="w200"
          ></zm-data-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button @click="onSearch" t="search"></zm-button>
          <zm-button @click="onReset" t="reset"></zm-button>
        </zm-form-item>
      </zm-form>
    </app-block>
    <app-block>
      <div class="mb10">
        <zm-button type="warning" @click="onGetFields">
          导出
        </zm-button>
        <zm-export ref="export" :api="exportApi()" type="warning" :params="exportForm" v-show="false"></zm-export>
        <zm-button type="primary" @click="orderClose" :disabled="!selectedNos" v-if="searchForm.tabType === '1'">订单关闭</zm-button>
      </div>
      <zm-table-data
        :data="tableParams.data"
        ref="multipleTable"
        :columns="columns"
        :fetch="loadList"
        :table-params="tableParams"
        :mutilple="true"
        @selection-change="saveIds"
        config-header
        :store-key="SOTRE_KEY_FINANCIAL_ACTIVATE_LIST"
        :head-min="5"
        :head-max="15"
      ></zm-table-data>

      <detail-active
        v-if="activeParams.visible"
        v-model="activeParams.visible"
        :obj="activeParams.obj"
        @after="loadList"
      ></detail-active>

      <detail-container
        v-if="extendDetailParams.visible"
        v-model="extendDetailParams.visible"
        :id="extendDetailParams.id"
        :business-id="extendDetailParams.id"
        :is-show-btn="false"
        :type="extendDetailParams.type"
      >
      </detail-container>
      <export-panel
        :api="exportField()"
        :extend-params="{tabType: searchForm.tabType}"
        v-if="exportParams.visible"
        v-model="exportParams.visible"
        @after="onExport"
        type="8"
      ></export-panel>
    </app-block>
  </app-container>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import {exportActive,
  getActivePageList,
  getExportActiveField,
  close

} from '@/api/src/saleOrder'
import { columns, activeStatus } from './const'
import DetailActive from './components/detail'
import DetailContainer from '@/components/DetailContainer'
import ExportPanel from '@/components/exportFields'
import { SOTRE_KEY_FINANCIAL_ACTIVATE_LIST } from '@/model/tableStoreKey'

export default {
  name: 'SaleActiveList',
  components: { DetailActive, ExportPanel, DetailContainer },
  mixins: [tableMixin],
  data () {
    return {
      activeStatus,
      selectedNos: '',
      SOTRE_KEY_FINANCIAL_ACTIVATE_LIST,
      searchForm: {
        tabType: '1',
        orderNoName: '',
        productCodeName: '',
        type: '',
        dateType: '',
        startTime: '',
        endTime: '',
        operatorId: ''
      },
      exportForm: {

      },
      dateType: [
        {
          name: '签单日期',
          value: '1'
        },
        {
          name: '退款日期',
          value: '2'
        }
      ],
      activeParams: {
        visible: false,
        obj: {}
      },
      newParams: {
        visible: false,
        obj: {}
      },
      extendDetailParams: {
        visible: false,
        id: '',
        type: '',
        obj: {}
      },
      exportParams: {visible: false}
    }
  },
  computed: {
    columns () {
      return columns(this)
    }
  },
  watch: {},
  created () {},
  methods: {
    exportApi () {
      return exportActive
    },
    exportField () {
      return getExportActiveField
    },
    onGetFields () {
      this.exportParams.visible = true
    },
    async loadList () {
      const _res = await getActivePageList(
        this.assignQuery(this.searchForm)
      )
      this.initialTableData(_res.list, _res.count)
    },
    saveIds (selection, row) {
      // 保存已选
      this.selectedNos = selection.map(item => item.id).join(',')
    },
    async onExport (fields) {
      this.exportForm = {...this.searchForm, ...{ids: this.selectedNos}, ...{fields: fields}}
      this.$refs.export.onExport()
    },

    onReset () {
      if (this.$refs.searchForm) {
        this.$refs.searchForm.resetFields()
        this.searchForm.startTime = ''
        this.searchForm.endTime = ''
        this.onSearch()
      }
    },
    onEdit (row) {
      this.newParams = {
        visible: true,
        obj: row
      }
    },
    onExtendShow (id, type) {
      this.extendDetailParams = {
        visible: true,
        id: id,
        businessId: id,
        type: type
      }
    },
    onActive (row, type) {
      this.activeParams = {
        visible: true,
        obj: row
      }
    },
    async orderClose () {
      if (!this.selectedNos) {
        this.$message.warning('请选中数据使用')
        return
      }

      this.$confirm(
        '是否关闭选中的订单',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        await close({id: this.selectedNos})
        this.$message.success('关闭成功')
        this.loadList()
      })
        .catch(() => {})
    }
  }
}
</script>

<style scoped lang="scss"></style>
